<script setup lang="ts">
import { computed, onMounted } from "vue";
import { useRouter } from "vue-router";

import { NFlex } from "naive-ui";
import { NList } from "naive-ui";
import { NListItem } from "naive-ui";
import { NThing } from "naive-ui";
// import { NTag } from "naive-ui";
// import { NTime } from "naive-ui";
import { NButton } from "naive-ui";
import { NAvatar } from "naive-ui";
import { NIcon } from "naive-ui";

import { NewspaperOutline as NewsIcon } from "@vicons/ionicons5";

import { useNewsStore } from "@/store/news";

const router = useRouter();
const newsStore = useNewsStore();

const newsSummary = computed(() => newsStore.newsSummary);

const goToDetail = (id: string, title: string): void => {
  router.push({ name: "NewsDetail", params: { newsId: id, newsTitle: title } });
};

onMounted(async () => {
  await newsStore.fetchSummary();
  // console.log(newsStore.newsSummary);
});
</script>

<template>
  <n-flex justify="center" align="center" class="w-full h-full">
    <n-list hoverable class="w-full">
      <n-list-item class="w-full">
        <n-flex
          v-for="item in newsSummary"
          :key="item.getId()"
          justify="center"
        >
          <n-thing
            content-class="text-xl"
            description-class="flex justify-start"
            class="w-full"
          >
            <template #avatar>
              <n-avatar>
                <n-icon>
                  <news-icon />
                </n-icon>
              </n-avatar>
            </template>
            <template #header>
              <span class="text-2xl">{{ item.getTitle() }}</span>
            </template>
            <template #description>
              <!-- <n-tag
                :bordered="false"
                type="error"
                v-if="item.tag == '重要新闻'"
              >
                重要新闻
              </n-tag> -->
            </template>
            <template #default> {{ item.getSummary() }} </template>
            <!-- <template #footer>
              <n-time :time="item.time"></n-time>
            </template> -->
            <template #action>
              <n-button @click="goToDetail(item.getId(), item.getTitle())"
                >详情</n-button
              >
            </template>
          </n-thing>
        </n-flex>
      </n-list-item>
    </n-list>
  </n-flex>
</template>

<style scoped></style>
